<template>
    <li>
        <div>
            <img class="ablum-img" :src="imgUrl" :alt="name">
            <router-link :title="name" :to="ablumRoute" class="mask"></router-link>
            <a href="javascript;" class="icon-play"></a>
        </div>

        <p class="ablum-name">
            <router-link :title="name" :to="ablumRoute">{{name}}</router-link>
        </p>
        <p class="ablum-author" :title="author">
            <router-link :to="authorRoute">{{ author }}</router-link>
        </p>
    </li>
</template>
<script setup>
    defineProps({
        "name":String,
        "author":String,
        "imgUrl":String,
        "authorRoute":String,
        "ablumRoute":String
    })
</script>

<style lang="scss" scoped>
    li{
        float: left;
        width: 118px;
        height: 150px;
        margin-left: 11px;
        background-position: -260px 100px;
        div{
            margin-bottom: 7px;
            width: 100px;
            height: 100px;
            position: relative;

            &:hover{
                .icon-play{
                    display: block;
                }
            }
            .ablum-img{
                display: block;
                width: 100%;
                height: 100%;
            }
            .mask{
                position: absolute;
                left: 0;
                top: 0;
                width: 118px;
                height: 100px;
                background-position: 0 -570px;
            }

            .icon-play{
                position: absolute;
                right: 10px;
                bottom: 5px;
                left: 72px;
                width: 22px;
                height: 22px;
                background-position: 0 -85px;

                display: none;

               
            }
        }
        .p{
            width: 90%;
            line-height: 18px;

            
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
        }
        .ablum-name{ 

            a{
                color: #000;
            }
        }

        .ablum-author{
            a{
                color: #666;
                &:hover{
                    text-decoration: underline;
                }
            }
        }

    }
</style>